<template>
  <div>
    <el-upload action="*" :auto-upload="false" :show-file-list="false" :on-change="selectFileChange">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>

    <div v-for="item in showFileList" :key="item.name">
     
      <a :href="item?.url" class="aBlink">{{ item.name }}</a>
      <span @click="remove(item)" class="deleteCls">删除</span>
    </div>

    <!-- <UploadList @remove="remove" :files="showFileList" /> -->
  </div>
</template>

<script>
import { fileServerPath } from '@/config/app'
import { getFileInfo, uploadFile } from '@/apiList/api_file'
function getAllImgPath(fid) {
  return `${fileServerPath}/oss/downloadFile?fid=${fid}`
}
import { local } from '@/utils/jcore/storage'

import UploadList from 'element-ui/packages/upload/src/upload-list.vue'
export default {
  name: 'SingleUploadFile',
  components: {
    UploadList
  },
  props:{
    urlFid:''
  },
  data() {
    return {
      fileList: []
    }
  },
  computed: {
    showFileList() {
      return this.fileList.map((e) => {
        return {
          ...e,
          uid: e.fid,
          name: e.fileName,
          status: 'success'
        }
      })
    }
  },
  created() {},
  watch:{
    urlFid(val){
      this.echoFileList(val)
    }
  },
  methods: {
    echoFileList(fid) {
      console.log(fid);
      if (fid) {
        getFileInfo(fid).then((res) => {
          this.fileList = res
        })
      } else {
        this.fileList = []
      }
    },
    async selectFileChange(file) {
      const f = new FormData()
      f.append('file', file.raw)
      f.append('creator', local.get('authorityList').id)
      const res = await uploadFile(f)
      const fid = res.fileInfos[0].fid
      const filePath = getAllImgPath(fid)
      this.$emit('input', filePath)
      console.log(res.fileInfos)
      res.fileInfos[0].url = filePath
      this.$emit('change', res.fileInfos)
     

      this.fileList = res.fileInfos
    },
    async remove(file) {
      await this.$confirm(`确定删除 ${file.name}吗？`)
      this.fileList = []
      this.$emit('remove')
    }
  }
}
</script>

<style lang="less" scoped>
.avatar {
  width: 100%;
  display: block;
}
.aBlink {
  cursor: pointer;
  color: #409eff;
}
.deleteCls {
  cursor: pointer;
  color: #409eff;
  display: inline-block;
  margin-left: 20px;
}
</style>
